#{extends 'main.html'/}
#{set 'moreScripts'}
    <script>
        $('.carousel').carousel({
            interval: 5000 //changes the speed
        })


        var app = new Vue({
            el:'#app',
            data:{
                schoolList: [],
                txtName : '',
            },
            mounted:function(){
                $.getJSON('/tts/unitJson', function(data) {
                    app.schoolList = data;
                });
            },
            methods:{
                searchByName:function(){
                    if(app.txtName.length>0) {
                        window.location.href="/tts/nameList/"+app.txtName;
                    }
                }
            }
        });
    </script>
#{/set}


<!-- Navigation -->
#{navbar /}
<!-- Header Carousel -->
#{carousel /}
<!-- Page Content -->
<div class="container" id="app">

    <!-- Search  Section -->
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                导师搜索
            </h3>

        </div>
        <div class="col-md-10">
            <input class="form-control input-lg" type="text" style="margin:2px" placeholder="请输入姓名、学科或学院进行搜索" v-model="txtName" @keyup.enter="searchByName">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary btn-lg btn-block" style="margin:2px" @click="searchByName">搜索</button>
        </div>
    </div>
    <!-- /.row -->

    <!-- Portfolio Section -->
    <div id="school" class="row">
        <div class="col-lg-12">
            <h3 class="page-header">按学院查看</h3>
        </div>
        <div class="col-md-3 col-sm-6 " v-for="item in schoolList">
            <div class="panel panel-default">
                <a :href="'/tts/schoolList/'+item.unit">
                    {{item.unit}}
                </a>
            </div>
        </div>
    </div>
    <!-- /.row -->


    <hr>
    <!-- Footer -->
    #{footer /}

</div>

